<template>
    <div class="home">
        <Carousel :agritainmentArr="agritainmentArr"></Carousel>
        <div class="content">
            <HelpPoor></HelpPoor>
            <h1>魅力农家乐</h1>
            <div class="agritainment">
                <Agritainment class="item" v-for="item in agritainmentArr" :key="item.id" :agritainmentArr="item">
                </Agritainment>
            </div>
            <h1>优质农产品</h1>
            <div class="goods">
                <Goods class="item" v-for="goods in goodsArr" :key="goods.id" :goods="goods"></Goods>
            </div>
        </div>
        <GoodsDetail></GoodsDetail>
    </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'

import Carousel from './carousel/index.vue'
import HelpPoor from './help_poor/index.vue'
import Agritainment from './agritainment/index.vue'
import Goods from './goods/index.vue'
import GoodsDetail from './goods_detail/index'

export default {
    name: 'Home',
    components: {
        Carousel,
        HelpPoor,
        Agritainment,
        Goods,
        GoodsDetail
    },
    mixins: [],
    props: {

    },
    data() {
        return {
            agritainmentArr: [],
        }
    },
    computed: {
        ...mapState('goodsStore', ['goodsArr'])
    },
    watch: {

    },
    mounted() {
        this.getAgritainmentData()
        this.getGoodsData()
    },
    methods: {
        ...mapMutations('goodsStore', ['getGoodsData']),
        getAgritainmentData() {
            this.request.post('/farmInfo/selectFarmInfoPage', {}).then(res => {
                if (res.code == 20000) {
                    this.agritainmentArr = res.data.list
                }

            })
        },
    }
};
</script>
<style lang='less' scoped>
.home {
    .content {
        width: 80%;
        margin: 10px auto;

        h1 {
            color: #11a983;
            font-size: 25px;
            font-weight: 800;
            text-align: center;
            margin-bottom: 45px;
            margin-top: 20px;
        }

        .agritainment {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;

            .item {
                width: 30%;
            }
        }

        .goods {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            .item {
                width: 15%;
                margin: 10px;
            }
        }
    }
}
</style>